<template>
	<view>
		<view class="content">
			<view class="title flex align-center" >
				<input class="title input" type="text" placeholder="标题" v-model="info.title">
			</view>
			<view class=" flex align-center" >
				<textarea @blur="confirmUserName" class="text-area" v-model="info.content_str" placeholder="名单"></textarea>
			</view>
		</view>
		<view class="show-number" v-if="info.content.length > 0">名单成功识别到<text>{{info.content.length}}</text>人</view>
		<view class="join-list" v-if="info.content.length > 0">
			<view class="username-list flex align-center ">
				<view class="username-child" v-for="(item,index) in info.content" :key="index">{{item}}</view>
			</view>
		</view>
		<view class="sub-button" @tap="submit" v-if="submitCreateStatus == true" >{{buttonText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				info:{
					title:'',
					content_str:'',
					content:[]
				},
				submitCreateStatus:true,
				buttonText:'立即修改'
			}
		},
		onLoad(params){
			if(params.id)
			{
				this.id = params.id;
				this.getInfo();
			}
		},
		methods: {
			submit(){
				var that = this;
				var content = that.confirmUserName();
				if(content.length < 1)
				{
					that.$api.msg('未获取到人员名单');return ;
				}
				that.$api.showModal('','确认修改',function(res){
					if(res == 'yes')
					{
						that.$api.loadingMsg('');
						that.$http.post('user/saveUserNameInfo',{
							id:that.id,
							title:that.info.title,
							content
						}).then(res=>{
							that.$api.msg(res.msg);
							if(res.code == 1)
							{
								that.$api.navbackTo();
							}
						})
					}
				})
			},
			opeContent(){
				let content = this.info.content;
				if(typeof content == 'string')
				{
					content = JSON.parse(content);
				}
				let contentStr = content.join('\n');
				this.info.content_str = contentStr;
				this.info.content = content;
				//console.log(content);
			},
			confirmUserName(){
				var that = this;
				var arr = this.$api.splitStrRN(this.info.content_str,true);
				if(arr.status == true)
				{
					this.info.content = arr.list;
					this.info.content_str = arr.list.join('\n');
				}else{
					this.info.content = [];
				}
				return this.info.content;
			},
			getInfo(){
				var that = this;
				that.$http.get('user/getUserNameInfo?id='+that.id,{
					
				}).then(res=>{
					if(res.code == 1)
					{
						that.info = res.data.info;
						that.opeContent();
					}else{
						that.info = {};
						that.$api.msg(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.sub-button{
		width: 90%;
		margin: 20rpx auto;
		height: 80rpx;
		background: $uni-btn-color;
		border-radius: 60rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		letter-spacing: 6rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 50rpx;
		left: 5%;
	}
	.join-list{
		padding: 20rpx;
		.username-list{
			width: 100%;
			flex-wrap: wrap;
			.username-child{
				width: 15.6%;
				border: 2rpx solid #eeeeee;
				margin-right: 1%;
				height: 70rpx;
				overflow: hidden;
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #888888;
				background: #eeeeee;
				text-align: center;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;    
			}
		}
	}
.show-number{
	text-align: center;
	color: #666666;
}
.content{
	width: 94%;
	margin: 20rpx 3%;
	background-color: #ffffff;
	border-radius: 20rpx;
	color: #666666;
	.title{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 2rpx solid #eeeeee;
		.input{
			padding-left: 20rpx;
		}
	}
	.text-area{
		width: 100%;
		padding: 20rpx;
	}
}
</style>
